<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '发布动态',
  },
}
</route>

<template>
  <div class="add-evaluate-page">
    <div class="input">
      <wd-textarea
        v-model="mode.title"
        no-border
        custom-class="text-area"
        placeholder="分享你的心得和经验吧"
      />

      <div class="upload">
        <ImgUpload v-model="mode.imgUrlList" multiple :count="20" />
      </div>
    </div>

    <div class="custom-button button" @click="publish()">发布</div>
  </div>
</template>

<script lang="ts" setup>
import { msgNone, msgSuccess } from '@/utils/index'
import { back } from '@/utils/page'

const mode = reactive({
  title: '',
  imgUrls: '',
  imgUrlList: [],
})

function publish() {
  if (mode.title === '') {
    msgNone('请输入动态内容')
    return
  }
  if (mode.imgUrlList.length === 0) {
    msgNone('请上传图片')
    return
  }
  mode.imgUrls = mode.imgUrlList.join(',')

  uni.showLoading()
  http
    .post('/posts-info-app/publish', mode)
    .then(() => {
      msgSuccess('操作成功').then(() => {
        back()
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}
</script>

<style lang="scss" scoped>
.add-evaluate-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 28rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 28rpx);
  background-color: var(--bgc4);

  .input {
    padding: 30rpx 24rpx 10rpx;
    margin-top: 28rpx;
    background-color: #fff;
    border-radius: 30rpx;
    :deep(.text-area) {
      --wot-textarea-cell-padding: 0;
      --wot-textarea-padding: 0;
      .wd-textarea__value {
        padding-right: 0;
      }
    }
    :deep(.upload-img) {
      .wd-upload__picture,
      .wd-upload__evoke {
        overflow: hidden;
        border-radius: 23rpx;
      }
    }
  }

  .button {
    position: fixed;
    inset: 40rpx 30rpx;
    top: auto;
  }
}
</style>
